<ion-header class="no-title">
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title />
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>
    <div class="list-item-limited-width">
        <ion-item class="ion-text-wrap course-name">
            <ion-label>
                <h1>
                    <core-format-text [text]="reportDetail.name" contextLevel="report" [contextInstanceId]="reportDetail.id" />
                </h1>
            </ion-label>
        </ion-item>

        <ion-item class="ion-text-wrap" [detail]="false" *ngFor="let item of reportDetailToDisplay">
            <ion-label>
                <p>{{ item.title | translate }}</p>
                <core-format-text [text]="item.text" contextLevel="report" [contextInstanceId]="reportDetail.id" />
            </ion-label>
        </ion-item>
    </div>
</ion-content>

<ion-footer class="ion-no-border">
    <ion-item class="ion-text-wrap filters-info">
        <ion-label>
            <p>
                <ion-icon name="fas-circle-info" aria-hidden="true" />
                <core-format-text [text]="'core.reportbuilder.filtersapplied' | translate: { $a: reportUrl }" [filter]="false"
                    [captureLinks]="false" />
            </p>
        </ion-label>
    </ion-item>
</ion-footer>
